<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/register.css">
</head>
<body>
<div id="app">
    <div class="header">CREATE ACCOUNT</div>
    <el-form status-icon :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item size="small" label="Are you registering as a client or host" prop="level">
            <el-select v-model="ruleForm.level" placeholder="Select your choice" clearable>
                <el-option label="client" value="client"></el-option>
                <el-option label="host" value="host"></el-option>
            </el-select>
        </el-form-item>
        <div class="flex">
            <el-form-item size="small" label="First Name" prop="firstName">
                <el-input v-model="ruleForm.firstName" placeholder="Enter your first name"></el-input>
            </el-form-item>
            <el-form-item size="small" label="Last Name" prop="lastName">
                <el-input v-model="ruleForm.lastName" placeholder="Enter your last name"></el-input>
            </el-form-item>
        </div>
        <div class="flex">
            <el-form-item size="small" label="Email address" prop="email">
                <el-input v-model="ruleForm.email" placeholder="Enter email"></el-input>
            </el-form-item>
            <el-form-item size="small" label="Mobile" prop="mobile">
                <el-input v-model="ruleForm.mobile" placeholder="Enter your mobile number"></el-input>
            </el-form-item>
        </div>
        <div class="flex">
            <el-form-item size="small" label="Password" prop="password">
                <el-input v-model="ruleForm.password" placeholder="Password"></el-input>
            </el-form-item>
            <el-form-item size="small" label="Confirm Password" prop="confirmPass">
                <el-input v-model="ruleForm.confirmPass" placeholder="Re-type your password"></el-input>
            </el-form-item>
        </div>
        <div class="flex">
            <el-form-item size="small" label="Address" prop="address">
                <el-input v-model="ruleForm.address" placeholder="address"></el-input>
            </el-form-item>
            <el-form-item size="small" label="Country" prop="country">
                <el-select v-model="ruleForm.country" placeholder="Select City" clearable>
                    <el-option label="中国" value="china"></el-option>
                    <el-option label="外国" value="world"></el-option>
                </el-select>
            </el-form-item>
        </div>
        <div class="flex2" v-show="flag">
            <el-form-item size="small" label="ABN" prop="abn">
                <el-input v-model="ruleForm.abn" placeholder="Enter your ABN number"></el-input>
            </el-form-item>
        </div>
        <div class="flex flex1">
            <el-form-item size="small">
                <el-button @click="resetForm('ruleForm')" type="info">Cancel</el-button>
            </el-form-item>
            <el-form-item size="small">
                <el-button type="primary" @click="submitForm('ruleForm')" class="button1">Submit</el-button>
            </el-form-item>
        </div>
    </el-form>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            let validateEmail = (rule, value, callback) => {
                let reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
                if (!value.includes('@')) {
                    callback(new Error('Please include an "@" in the email address'));
                } else if (!reg.test(value)) {
                    callback(new Error('Please input true email address'));
                } else {
                    callback();
                }
            };
            let validateMobile = (rule, value, callback) => {
                let reg = /^1\d{10}$/
                if (!value) {
                    callback(new Error('Please fill in this field'));
                } else if (!reg.test(value)){
                    callback(new Error('Please input true telephone'))
                } else {
                    callback();
                }
            };
            let validatePass = (rule, value, callback) => {
                let reg =  /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!$%&])[a-zA-Z\d!$%&]*$/;
                if (!reg.test(value)) {
                    callback(new Error('Password contains at least 1 lower case letter, ' +
                        '1 uppercase letter, 1 number and one of following special characters !#$%'));
                } else {
                    callback();
                }
            };
            let validatePass2 = (rule, value, callback) => {
                if (value !== this.ruleForm.password) {
                    callback(new Error('No Match'));
                } else {
                    callback();
                }
            };
            return {
                // 控制ABN表单是否显示，默认不显示
                flag: false,
                ruleForm: {
                    level: '',
                    firstName: '',
                    lastName: '',
                    email: '',
                    mobile: '',
                    password: '',
                    confirmPass: '',
                    address: '',
                    country: '',
                    abn: ''
                },
                rules: {
                    level: [
                        {required: true, message: 'Please select your choice', trigger: 'change'}
                    ],
                    firstName: [
                        {required: true, message: 'Please fill in this field', trigger: 'blur'}
                    ],
                    lastName: [
                        {required: true, message: 'Please fill in this field', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: 'Please fill in this field', trigger: 'blur'},
                        { validator: validateEmail, trigger: 'blur' }
                    ],
                    mobile: [
                        {validator: validateMobile, trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: 'Please fill in this field', trigger: 'blur'},
                        { min: 6, max: 12, message: 'the length should from six to twelve', trigger: 'blur' },
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    confirmPass: [
                        {required: true, message: 'Please fill in this field', trigger: 'blur'},
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    address: [
                        {required: true, message: 'Please fill in this field', trigger: 'blur'}
                    ],
                    country: [
                        {required: true, message: 'Please select your choice', trigger: 'blur'}
                    ],
                    abn: [
                        {required: true, message: 'Please fill in this field', trigger: 'blur'}
                    ],
                }
            }
        },
        watch: {
            'ruleForm.level': {
                handler(newVal){
                    this.flag = newVal === 'host';
                },
                deep: true
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('success!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</html>